<template>
  <a-modal
    :title="this.title"
    :visible="this.visible"
    :width="660"
    @cancel="cancel"
    @ok="ok"
  >
    <a-spin v-show="isUpload" size="large">
    </a-spin>
    <a-form
      v-bind="formItemLayout"
      :form="form"
    >
      <a-form-item label="文件">
        <a-upload
          v-decorator="this.validator.upload"
          :action="this.action"
          :data="this.param"
          :headers="headers"
          :showUploadList="false"
          directory
          name="file"
          @change="handleChange"
          :before-upload="beforeUpload"
        >
          <a-button>
            <a-icon type="upload"/>
            选择文件
          </a-button>
        </a-upload>
        <a-button style="margin-left:40px" type="danger" @click="clearUpload">
          <a-icon type="delete"/>
          清空文件
        </a-button>
      </a-form-item>
      <a-form-item label="数据标识">
        <a-input v-decorator="this.validator.fileConfig"/>
      </a-form-item>
      <a-form-item label="日期">
        <a-date-picker v-decorator="this.validator.fileTime"/>
      </a-form-item>
      <a-form-item label="地理坐标系">
        <a-select v-decorator="this.validator.gcs">
          <a-select-option value="北京54">
            北京54
          </a-select-option>
          <a-select-option value="西安80">
            西安80
          </a-select-option>
          <a-select-option value="WGS－84">
            WGS－84
          </a-select-option>
          <a-select-option value="2000国家大地坐标系">
            2000国家大地坐标系
          </a-select-option>
        </a-select>
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script>
import aModal from "@/common/modal"
import {CLEARUPLOAD, CLEARUPLOADUPDATE, IMPORTFILE, IMPORTFILEUPDATE,UPLOADFILEUPDATE} from '@/../static/js/apis.js'
import Global from '@/../static/js/global.js'
export default {
  inject: ['reload'],                                 //注入App里的reload方法
  name: "importModal",
  props: ['title', 'visible', 'action', 'param', 'type', 'validator'],
  components: {
    aModal
  },
  computed: {
    headers () {
      return {
        "token" : localStorage.getItem("token")
      }
    }
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {span: 6},
        wrapperCol: {span: 14},
      },
      isUpload:false,
      fileList:[],
      num:0,
      finishNum:0,
      //   userid,

    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: 'validate_other'});
  },
  methods: {
    beforeUpload(file,filelist) {
      // console.log(filelist);
      // this.fileList = [...this.fileList, file];
      this.fileList = filelist;
      // console.log("filelist:"+filelist.length)
      if(filelist.length>Global.maxFileNum){
        // if(this.num ===0){
        //   this.$message.error("文件数量超出限制！")
        // console.log("filelist:"+filelist.length)
        // }
        filelist = [];
        return false;
      }else{
        this.isUpload = true;
      }

    },
    handleChange(info) {
      console.log(info.file.status);
      if (info.file.status !== 'uploading') {
        //console.log(info);
        if(this.fileList.length > Global.maxFileNum && this.num === 0) {
          this.num++;
          this.fileList=[];
          // info.fileList=[];
          this.$message.error("文件数量超出限制！文件数不得超过"+Global.maxFileNum)
          return  false;
        }else if(this.num !== 0){
          this.num ++;
        }
        // else if(this.fileList.length > Global.maxFileNum){
        //   return false;
        // }
      }/*else if(info.file.status === 'error'&&this.num !== 0){
            this.num =0;
         }*/
      console.log(this.num);
      if (info.file.status === 'done' && this.fileList.length<=Global.maxFileNum) {
        //this.isUpload=false;
        this.$message.success(`${info.file.name} 上传成功`);
        // this.fileList=[];
        this.num = 0;
        this.finishNum++;
      } else if (info.file.status === 'error' && this.fileList.length<=Global.maxFileNum) {
        this.$message.error(`${info.file.name} 上传失败`);
        // this.fileList=[];
        this.num = 0;
        this.finishNum++;
      }


      console.log(info);
      if(( info.file.status === 'done'||info.file.status === 'error')&& this.finishNum===this.fileList.length){
        // console.log(this.fileList);
        this.isUpload=false;
        this.finishNum=0;
        this.fileList=[];
        info.fileList=[];

      }else if(this.num===this.fileList.length){
        this.num = 0;
      }


    },
    clearUpload() {
      let self = this
      if (self.type == '新建') {
        CLEARUPLOAD(this.param, function (res) {
          self.form.resetFields('upload')
          self.$message.success(res.message);
        })
      } else {
        CLEARUPLOADUPDATE(this.param, function (res) {
          self.form.resetFields('upload')
          self.$message.success(res.message);
        })
      }

    },
    ok(e) {
      let self = this;
      e.preventDefault();
      if (self.type == '新建') {
        self.form.validateFields((err, values) => {
          if (!err) {
            values.fileTime = values.fileTime.format('YYYY-MM-DD')
            console.log('Received values of form: ', values);
            values.userId = self.param.userId
            values.menuId = 11
            IMPORTFILE(values, function (res) {
              if(res.code=='200'){
                self.$message.success(res.message);
                self.reload()
              }else{
                self.$message.error(res.message);
              }
            })
          }
        });
      } else {
        console.log(self.validator)
        self.form.validateFields((err, values) => {
          if (!err) {
            values.fileTime = values.fileTime.format('YYYY-MM-DD')
            console.log('Received values of form: ', values);
            values.userId = self.param.userId
            values.fileId = self.param.fileId
            values.menuId = 11
            IMPORTFILEUPDATE(values, function (res) {
              if(res.code=='200'){
                self.$message.success(res.message);
                self.reload()
              }else{
                self.$message.error(res.message);
              }
            })
          }
        });
      }
    },
    /*关闭modal*/
    cancel(e) {
      this.form.resetFields();
      this.$emit("cancel", e)
    }
  }
}
</script>

<style scoped>
.ant-spin-spinning {
  height: 300px;
  width: 600px;
  background: #eeeeee91;
  line-height: 200px;
  position: absolute;
  z-index: 1000;
}
</style>
